import { Provider } from 'react-redux'
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom'
import { Home, Employee, List, User } from './pages'
import store from './store'
import './index.css'
import { Layout, Menu, Breadcrumb } from 'antd'

const { Header, Content, Footer } = Layout

export default function RouterApp() {
  return (
    <Router>
      <Provider store={store}>
        <div className="container">
          <Layout>
            <Header style={{ position: 'fixed', zIndex: 1, width: '100%' }}>
              <div className="logo" />
              <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']}>
                <Menu.Item key="1">
                  <Link to="/">index</Link>
                </Menu.Item>
                <Menu.Item key="2">
                  <Link to="/employee">employee</Link>
                </Menu.Item>
                <Menu.Item key="3">
                  <Link to="/list">list</Link>
                </Menu.Item>
              </Menu>
            </Header>
            <Content
              className="site-layout"
              style={{ padding: '0 50px', marginTop: 64 }}
            >
              {/* <Breadcrumb style={{ margin: '16px 0' }}>
                <Breadcrumb.Item>Home</Breadcrumb.Item>
                <Breadcrumb.Item>List</Breadcrumb.Item>
                <Breadcrumb.Item>App</Breadcrumb.Item>
              </Breadcrumb> */}
              <div
                className="site-layout-background"
                style={{ padding: 24, minHeight: 380 }}
              >
                <Switch>
                  <Route path="/" exact>
                    <Home />
                  </Route>
                  <Route path="/employee">
                    <Employee />
                  </Route>
                  <Route path="/list" exact>
                    <List />
                  </Route>
                  <Route path="/list/:id">
                    <User />
                  </Route>
                </Switch>
              </div>
            </Content>
            <Footer style={{ textAlign: 'center' }}>
              Ant Design ©2018 Created by Ant UED
            </Footer>
          </Layout>
        </div>
      </Provider>
    </Router>
  )
}
